<template>
	<view class="broadIndex">
		<navBar isBack backColor="#fff" title="施工播报" color="#fff" background="transparent"></navBar>
		<view class="b_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		
		<!-- 列表内容 -->
		<view class="b_content" v-if="broadList.length" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="cont_List" v-for="(item,index) in broadList" :key="index">
				<view class="list_time">
					<h3 class="omit-1">{{item.title}}</h3>
					<view class="img" @click="delBroad(item.id)">
						<image src="https://manager.ryz1620.com/static/constr/del2.png" mode=""></image>
					</view>
				</view>
				<scroll-view scroll-x='true' class="list_image" v-if="item.type==0">
					<view v-if="!Array.isArray(item.media)" class="imgItem">
						<image :src="item.media.path" mode=""></image>
					</view>
					<view v-else class="imgItem" v-for="(item1,index1) in item.media" :key="index1">
						<image :src="item1.path" mode=""></image>
					</view>
				</scroll-view>
				<scroll-view scroll-x='true' class="list_image" v-if="item.type==1">
					<view v-if="!Array.isArray(item.media)" class="imgItem">
						<video :src="item.media.path" controls :poster="item.media.cover" mode=""></video>
					</view>
					<view v-else class="imgItem" v-for="(item1,index1) in item.media" :key="index1">
						<video :src="item1.path" controls :poster="item1.cover" mode=""></video>
					</view>
				</scroll-view>
				<span>{{$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd')}}</span>
			</view>
		</view>
		
		<!-- 没有数据 -->
		<view class="notList" v-else>
				<image src="https://manager.ryz1620.com/static/constr/notList.png" mode=""></image>
				空空如也
		</view>
		
		<!-- 发布按钮 -->
		<view class="btn">
			<button type="default" @click="toRelease">发布</button>
		</view>
		
		<u-popup v-model="show1" mode="center" border-radius="8" class="pop pop1">
			<view class="popBox">
				<h3>请选择发布的播报类型</h3>
				<view class="popBtn">
					<button type="default" @click="toImg">图片+文字</button>
					<button class="btn2" type="default" @click="toVideo">视频+文字</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar';
	import service_constr from '@/service/constr.js'
	export default{
		data(){
			return{
				broadList:[],
				navHeight:0,
				order_id:null,
				page:1,
				pagesize:10,
				show1:false
			}
		},
		onShow() {
			this.getList()
		},
		onLoad(options) {
			this.navHeight = 192 - Number(this.$store.state.system.navBarHeight)*2
			this.order_id = options.order_id
			this.getList()
		},
		methods:{
			// 获取施工播报列表
			getList(){
				let params={
					order_id:this.order_id,
					page:this.page,
					pagesize:this.pagesize
				}
				service_constr.getBroadList(params).then(res=>{
					console.log(res)
					if(res.code==1){
						this.broadList = res.data?res.data:[];
					}else{
						this.broadList = []
					}
				})
			},
			
			// 发布按钮
			toRelease(){
				this.show1 = true
			},
			// 选择图片+文字
			toImg(){
				this.show1 = false
				uni.navigateTo({
					url:`./release?order_id=${this.order_id}&type=0`
				})
			},
			// 选择视频+文字
			toVideo(){
				this.show1 = false
				uni.navigateTo({
					url:`./release?order_id=${this.order_id}&type=1`
				})
			},
			
			// 删除播报
			delBroad(id){
				uni.showModal({
					title:'提示',
					content:'确定要删除此播报吗？',
					success:res=>{
						if(res.confirm){
							service_constr.toDelBroad({id}).then(res=>{
								if(res.code==1){
									this.getList()
									uni.showToast({
										title:'删除成功',
										icon:'success'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.broadIndex{
		height: 100%;
		background-color: #fff;
		.b_topImg{width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		
		// 列表内容
		.b_content{
			background-color: #fff;
			width: 100%;
			padding: 40rpx 0;
			margin-bottom: 120rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.cont_List{
				border-radius: 16rpx;
				margin: 0 auto 24rpx;
				width: 702rpx;
				padding: 24rpx 24rpx 28rpx 24rpx;
				min-height: 362rpx;
				background-color: #F8F8F8;
				.list_image{
					// border-bottom: 3rpx solid #F8F8F8;
					padding: 24rpx 0;
					display: flex;
					width: 654rpx;
					overflow:hidden;
					white-space:nowrap;
					// justify-content: space-between;
					// align-items: center;
					.imgItem{
						display: inline-block;
						image{width: 182rpx;height: 182rpx; border-radius: 4rpx;margin-right: 16rpx;}
						video{
							width: 300rpx;
							height: 200rpx;
							margin-right: 16rpx;
							border-radius: 4rpx;
						}
					}
				}
				.list_time{
					width: 100%;
					h3{width: 574rpx;font: 400 28rpx/40rpx PingFang SC; color:#1A1C20;}
					margin-top: 18rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.img{
						width: 40rpx;
						height: 40rpx;
						background-color: #fff;
						border-radius: 50%;
						padding: 5rpx;
						image{width: 30rpx;height: 30rpx;}
					}
				}
				span{font: 400 24rpx/34rpx PingFang SC;color: #A0A0A0;}
			}
		}
		
		// 没有数据
		.notList{
			width: 430rpx;
			height: 350rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{width: 430rpx;height: 300rpx;margin-bottom: 40rpx;}
			font: bold 28rpx/40rpx PingFang SC;
			color: #939393;
		}
		
		// 发布按钮
		.btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			button{
				margin: 10rpx auto;
				width: 606rpx;
				height: 80rpx;
				background-color: #E7AD14;
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
		// 弹框
		.pop{
			.popBox{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 528rpx;
				height: 240rpx;
				padding: 40rpx 48rpx 28rpx 48rpx;
				h3{font: 600 30rpx/40rpx PingFang SC;color: #292A2B;}
				.ipt{
					padding: 24rpx 4rpx;
					border-bottom: 2rpx solid #D8D8D8;
				}
				.popBtn{
					display: flex;
					justify-content: space-between;
					button{
						width: 196rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #F5F5F5;
						font: 400 26rpx/64rpx PingFang SC;
						color: #0A0605;
					}
					.btn2{
						background-color: #EBB964;
						color: #fff;
					}
				}
			}
		}
		
		.pop1{
			.popBox{
				h3{text-align: center;}
				.ipt{border: none;text-align: center;}
			}
			.popBtn{
				button:nth-child(1){
					border: 2rpx solid #EBB964;
					background-color: #fff;
					color: #EBB964;
				}
			}
		}
	}
</style>
